<template>
  <div id="food-rank">
    <ContentField>
      <template v-slot:content-field-card-name>菜品评价排行榜</template>
      <template v-slot:content-field-card-button></template>
      <template v-slot:content-field-card-body>
        <div id="food-rank-body" style="position: relative">
          <el-table
            :data="food_rank_list"
            border
            height="500"
            style="width: 100%; position: absolute"
          >
            <el-table-column prop="name" label="菜品名" />
            <el-table-column prop="price" label="价格" />
            <el-table-column prop="foodReviewStar" label="评分" />
          </el-table>
        </div>
      </template>
      <template v-slot:content-field-card-footer>
        <div>
          <!-- <el-pagination
            background
            :page-size="page_content"
            :pager-count="page_num"
            layout="prev, pager, next"
            :total="total_num"
            :current-change="paginationChange"
            :size-change="paginationChange"
          /> -->
          <el-pagination
            :current-page="page_num"
            :page-size="page_content"
            :page-sizes="[100, 200, 300, 400]"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total_num"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </template>
    </ContentField>
  </div>
</template>

<script>
import ContentField from "@/components/ContentField.vue";
import { useStore } from "vuex";
import { computed, ref } from "vue";

export default {
  components: {
    ContentField,
  },
  setup() {
    let store = useStore();

    let page_num = ref(1);
    let page_content = ref(10);

    store.dispatch("get_review_rank_about_food", {
      token: store.state.user.jwt_token,
      page_num: page_num.value - 1,
      page_content: page_content.value,
    });

    let total_num = computed(() => {
      return store.state.review.total_food_num;
    });

    let food_rank_list = computed(() => {
      let res = store.state.review.food_rank_list;
      if (res != null) {
        res.forEach((element) => {
          if (isNaN(element.foodReviewStar)) {
            element.foodReviewStar = "暂未评分";
          }
        });
      }
      return res;
    });

    let paginationChange = () => {
      // console.log("change");
      console.log(page_num.value);
      store.dispatch("get_review_rank_about_food", {
        token: store.state.user.jwt_token,
        page_num: page_num.value - 1,
        page_content: page_content.value,
      });
    };

    let handleCurrentChange = (cur) => {
      page_num.value = cur;
      paginationChange();
    };

    let handleSizeChange = (cur) => {
      page_content.value = cur;
      paginationChange();
    };

    return {
      store,
      food_rank_list,
      page_content,
      page_num,
      total_num,
      paginationChange,
      handleSizeChange,
      handleCurrentChange,
    };
  },
};
</script>

<style scoped></style>
